<template>
	<view class="my-car-page">
		<template v-if="defaultCar">
			<view class="car-list">
				<view class="between">
					<view class="left">
						{{ defaultCar }}
					</view>
					<view class="right" @click="changeCarNum">
						<uni-icons type="compose" size="20" color="#00B761"></uni-icons>
						更改车牌
					</view>
				</view>
				<up-line color="#2979ff" length="90%" ></up-line>
			
			</view>
			<view class="btnDelcon">
				<view class="">
					<up-button class="btnDel" @click="btnDelCar">删除</up-button>
				</view>
			</view>
		</template>
		<template v-else>
			<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/coupon.png"></up-empty>
			<up-button @click="changeCarNum" class="add-car-btn" color="#2878ff" :disabled="disAddBtn"> 添加车辆 </up-button>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			defaultCar:''
		}
	},
	onShow() {
		this.defaultCar = uni.getStorageSync('userCarNum')
	},
	created() {
	},
	mounted() {
	},
	methods: {
		 changeCarNum () {
			uni.navigateTo({
				url: '/pages/index/addCarNum'
			});
		},
		btnDelCar(){
			uni.removeStorageSync('userCarNum')
			this.$nextTick(()=>{
				this.defaultCar = uni.getStorageSync('userCarNum')
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.add-car-btn{
		margin-top: 20rpx;
		border-radius: 50rpx;
	}
	.btnDelcon{
		display: flex;
		justify-content: flex-end !important;
		width: 660rpx;
		.btnDel{
			width: 145rpx;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 5rpx;
			border: 1px solid #A0A0A0;
			
		
			font-weight: 400;
			font-size: 19rpx;
			color: #161616;
			line-height: 34rpx;
		}
	}

	.car-list{
		
		background: #ffffff;
		border-radius: 11rpx;
		height: 78rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.between{
			display: flex;
			height: 64rpx;
			width: 692rpx;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			align-items: center;
			.left{
				
				font-weight: bold;
				font-size: 40rpx;
				color: #161616;
				line-height: 34rpx;
			}
			.right{
			
				font-weight: 500;
				font-size: 27rpx;
				color: #8F939E;
				display: flex;
				align-items: center;
			}
		}
	}
.my-car-page {
	margin: 0 auto;
	margin-top: 20rpx;

	width: 692rpx;
	height: 169rpx;

	
}
</style>
